<template>
    <div>
        <div>
            <h1>已选学分总和</h1>
            {{ sumCredit }}
        </div>
        <div class="course-table">
            <el-button @click="getUserCourseList">获取选课信息</el-button>
            <el-button @click="showMyCourseTable">查看我的课表</el-button>
            <div>
                <el-table :data="myCourseList">
                    <el-table-column prop="id" label="课程ID" width="50">
                    </el-table-column>
                    <el-table-column prop="courseNumber" label="课程号" width="150">
                    </el-table-column>
                    <el-table-column prop="courseName" label="课程名" width="100">
                    </el-table-column>
                    <el-table-column prop="college" label="学院" width="100">
                    </el-table-column>
                    <el-table-column prop="major" label="专业" width="100">
                    </el-table-column>
                    <el-table-column prop="grade" label="年级" width="50">
                    </el-table-column>
                    <el-table-column prop="credit" label="学分" width="50">
                    </el-table-column>
                    <el-table-column prop="classification" label="课程类别" width="110">
                    </el-table-column>
                    <el-table-column prop="teacher" label="教师名" width="100">
                    </el-table-column>
                    <el-table-column prop="location" label="上课地点" width="100">
                    </el-table-column>
                    <el-table-column prop="time" label="上课时间" width="60">
                    </el-table-column>
                    <el-table-column prop="period" label="上课周期" width="60">
                    </el-table-column>
                    <el-table-column label="编辑">
                        <template slot-scope="scope">
                            <el-button @click="undoSelection(scope.row)" type="danger">撤课</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    created() {
        this.getSomeUserInfo()
    },
    data() {
        return {
            userId:'',
            myCourseList: [],
        }
    },
    methods: {
        showMyCourseTable(){
            this.$router.push("/user/courseTable")
        }
        ,
        getSomeUserInfo() {
            this.$axios.get("http://localhost:8000/getUserInfo", {
                headers: {
                    Authorization: sessionStorage.getItem('access-admin')
                }
            })
                .then(res => {
                    console.log(res)
                    this.userId = res.data.id
                    console.log(this.userId)
                })
                .catch(err => {
                    console.log(err)
                    this.$message.error(err.response.data.message)
                })
        },
        getUserCourseList() {
            this.$axios.get("http://localhost:8000/course/select/" + this.userId, {
                headers: {
                    Authorization: sessionStorage.getItem('access-admin')
                }
            })
                .then(res => {
                    this.myCourseList = res.data
                    this.$forceUpdate()
                })
                .catch(err => {
                    console.log(err)
                    this.$message.error(err.response.data.message)
                })
        },
        //撤课
        undoSelection(course) {
            this.$confirm('确定要撤课?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete("http://localhost:8000/course/select", {
                    headers: {
                        Authorization: sessionStorage.getItem('access-admin')
                    },
                    data: {
                        userId: this.userId,
                        courseId: course.id
                    }
                })
                    .then(res => {
                        console.log(res.data)
                        this.$router.go(0)
                    })
                    .catch(err => {
                        console.log(err)
                        this.$message.error(err.response.data.message)
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }

    },

}
</script>

<style lang="scss" scoped>

</style>